<template>
  <div class="question-actions">
    <button
      class="show-top"
      v-if="!examStore.currQuestion.showAnswer"
      @click="openShowAnswer"
    >
      <div class="show-answer">
        <div class="icon-placeholder" style="width: 18px; height: 18px">
          <img src="~@/static/openQuesition.png" alt="" />
        </div>
        Show Answer
      </div>
      <div class="bottom"></div>
    </button>
    <div class="answer-i" v-else>
      <div class="answer-inte">
        <el-select
          placeholder="Select"
          size="large"
          style="width: 139px; margin-right: 20px"
          v-model="currentValue"
          @change="handleChange"
        >
          <el-option
            v-for="item in quesitionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="right-i">
        <div
          :class="['answer-item', v.key ? 'ok' : '']"
          v-for="(v, i) in [9, 10].includes(examStore.currQuestion.type)
            ? quesitionList[current]?.answerList
            : examStore.currQuestion.answerList"
          :key="i"
        >
          <span class="label">{{ v.name }}</span>
          <span class="c">{{ v.check_num }}%</span>
        </div>
      </div>
    </div>
    <div class="right-actions">
      <button class="calculator" @click="openMaskCalcula">
        <!-- 计算器图标占位 -->
        <div class="icon-placeholder" style="width: 15px; height: 15px">
          <img src="~@/static/calendar.png" alt="" />
        </div>
        Calculator
      </button>

      <button class="error" @click="openDialog">
        <!-- 感叹号图标占位 -->
        <div class="icon-placeholder" style="width: 18px; height: 18px">
          <img src="~@/static/error.png" alt="" />
        </div>
        Error
      </button>
    </div>
    <!-- 纠错组件 -->
    <ErrorCorrection
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :content="dialogContent"
      :placeholder="dialogPlaceholder"
      @submit="handleDialogSubmit"
    />
    <!--  -->
    <CalculatorContent
      :visible="enableVisble"
      @update:visible="handleClose"
    ></CalculatorContent>
  </div>
</template>
<script setup>
import CalculatorContent from "@/components/CalculatorContent/index.vue";
import ErrorCorrection from "./errorCorrection.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const openShowAnswer = () => {
  examStore.currQuestion.showAnswer = true;
};

const quesitionList = ref([]);
watch(
  () => examStore.currQuestion.type,
  (val) => {
    if (val == 9) {
      quesitionList.value = examStore.currQuestion.childList.map((i, ind) => {
        return {
          value: ind + 1,
          label: `Qusetion${ind + 1}`,
          answerList: i?.answerList.map((a, index) => ({
            name: a.name,
            check_num: a.check_num,
            key:
              examStore.currQuestion.answerList.findIndex((j) => j.id == i.is_right) ==
              index,
          })),
        };
      });
      currentValue.value = quesitionList.value[0];
    } else if (val == 10) {
      quesitionList.value = examStore.currQuestion.childList.map((i, ind) => {
        return {
          value: ind + 1,
          label: `Qusetion${ind + 1}`,
          answerList: i?.answerList.map((a, index) => ({
            name: a.name,
            check_num: a.check_num,
            key: a.key,
          })),
        };
      });
      currentValue.value = quesitionList.value[0];
    } else {
      quesitionList.value = [{ value: 1, label: "Quesition1" }];
      currentValue.value = quesitionList.value[0];
    }
  }
);

// if ([9, 10].includes(examStore.currQuestion.type)) {
//   quesitionList.value = examStore.currQuestion.childList.map((i, ind) => {
//     return {
//       value: ind + 1,
//       label: `Qusetion${ind + 1}`,
//       answerList: i.answerList.map((a, index) => ({
//         name: a.name,
//         check_num: a.check_num,
//         key: examStore.currQuestion.answerList.findIndex(j =>j.id == i.is_right) == index,
//       })),
//     };
//   });
// } else {
//   quesitionList.value = [{ value: 1, label: "Quesition1" }];
// }
console.log(quesitionList.value, "quesitionList.value");

// 处理纠错
const dialogVisible = ref(false);
const dialogTitle = ref("试题纲错（富文本结构参考）");
const dialogContent = ref("");
const dialogPlaceholder = ref("请输入");
const current = ref(0);
const currentValue = ref(quesitionList.value[0]);
const enableVisble = ref(false);
const iOpenAnswer = ref(false);
const closeAnswer = () => {
  iOpenAnswer.value = false;
};
const openDialog = (content = "") => {
  dialogContent.value = content;
  dialogVisible.value = true;
};
const openMaskCalcula = () => {
  enableVisble.value = true;
};
const handleClose = () => {
  enableVisble.value = false;
};

const handleChange = (v) => {
  current.value = v - 1;
  currentValue.value = quesitionList.value[v - 1];
};
</script>

<style lang="scss" scoped>
.question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0px;

  // background-co;
  button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    font-size: 14px;

    .icon-placeholder {
      // background-color: #e0e0e0;
      // border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .show-answer,
  .show-top {
    background-color: #fff;
    border-color: #126983;
    color: #126983;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .right-actions {
    display: flex;
    gap: 12px;

    .calculator {
      background-color: #fff;
      border-color: #126983;
      color: #126983;
      font-weight: 600;
      font-size: 14px;

      &:hover {
        background-color: #f5f5f5;
      }
    }

    .error {
      background-color: #fff;
      border-color: #ff4d4f;
      color: #ff4d4f;

      font-weight: 600;
      font-size: 14px;

      &:hover {
        background-color: #fff1f0;
      }
    }
  }
}

:deep(.el-select) {
  border: 1px solid #126983 !important;
  border-radius: 8px;
  overflow: hidden;
  outline: none;
}

:deep(.el-select__wrapper.is-focused) {
  box-shadow: none;
}
.right-i {
  display: flex;
  gap: 10px;
  align-items: center;
  .answer-item {
    // width:40px;
    padding: 0px 10px;
    border: 1px solid #999;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid red;
    font-size: 14px;
    color: #333;
    &.ok {
      background-color: #126983;
      color: #fff !important;
      border-bottom: 2px solid #126983;
      .c {
        color: #fff;
      }
    }
    .label {
      text-align: right;
    }
    .c {
      text-align: center;
      font-weight: 600;
      color: #126983;
    }
  }
}
.answer-i {
  display: flex;
  align-items: center;
}
</style>
